<template>
	<view>
		<page-meta>
			<navigation-bar :title="nbTitle" :title-icon-radius="titleIconRadius" :subtitle-color="nbFrontColor"
				:loading="nbLoading" :front-color="nbFrontColor" :background-color="nbBackgroundColor" />
		</page-meta>
		<z-tabs :list="list" @change="tabsChange"></z-tabs>
		<view class="" v-for="(item, index) in AdviceList" :key="index" v-show="show">
			<uni-card :title="item.feedbackTitle" :extra="item.replyTime" :thumbnail="imageList(item.feedbackPhoto)">
				<mp-html class="notice-content content" :content="item.feedbackContent" />
				<template v-slot:actions>
					<view class="card-actions">
						<view class="card-actions-item" @click="showAdvice(item)">
							<text class="card-actions-item-text">查看</text>
						</view>
					</view>
				</template>
			</uni-card>
		</view>
		<my-advice :MyAdviceList="MyAdviceList" @refresh="refresh" v-show="!show"></my-advice>
	</view>
</template>

<script>
	import mpHtml from '@/components/mp-html/mp-html'
	import {
		getAllAdvice,
		getMyAdvice
	} from "@/api/advice/advice.js"
	export default {
		data() {
			return {
				nbTitle: '校长信箱',
				titleIconRadius: '20px',
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#fcc10d',
				AdviceList: [],
				active: 0,
				user: {},
				MyAdviceList: [],
				ifOnShow: false,
				list: ["全部建议", "我的建议"],
				show: true
			};
		},
		methods: {
			tabsChange(index) {
				if (index == 1) {
					this.show = false
				} else {
					this.show = true
				}
			},
			refresh() {
				getMyAdvice().then(res => {
					if (res.code == 200) {
						this.MyAdviceList = res.data
					}
				})
			},
			showAdvice(event) {
				uni.navigateTo({
					url: '/pages/home/adviceDetails/index?item=' + encodeURIComponent(JSON.stringify(event))
				})
			}

		},
		onLoad() {
			getAllAdvice().then(res => {
					if (res.code = 200) {
						this.AdviceList = res.data;
						for (let i = 0; i < this.AdviceList.length; i++) {
							if (this.AdviceList[i].feedbackPhoto == null) {
								this.AdviceList[i].feedbackPhoto = '/static/images/notFond.jpg'
							}
						}
					}
				}),
				getMyAdvice().then(res => {
					if (res.code == 200) {
						this.MyAdviceList = res.data
						for (let i = 0; i < this.MyAdviceList.length; i++) {
							if (this.MyAdviceList[i].feedbackPhoto == null) {
								this.MyAdviceList[i].feedbackPhoto = '/static/images/notFond.jpg'
							}
						}
					}

				})
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.AdviceList = []
				this.MyAdviceList = []
				getAllAdvice().then(res => {
						if (res.code = 200) {
							this.AdviceList = res.data;
							for (let i = 0; i < this.AdviceList.length; i++) {
								if (this.AdviceList[i].feedbackPhoto == null) {
									this.AdviceList[i].feedbackPhoto = '/static/images/notFond.jpg'
								}
							}
						}
					}),
					getMyAdvice().then(res => {
						if (res.code == 200) {
							this.MyAdviceList = res.data
							for (let i = 0; i < this.MyAdviceList.length; i++) {
								if (this.MyAdviceList[i].feedbackPhoto == null) {
									this.MyAdviceList[i].feedbackPhoto = '/static/images/notFond.jpg'
								}
							}
						}

					})
			}

		},
		computed: {
			imageList() {
				return function(e) {
					if (e == null) {
						return '@/static/images/head.jpg'
					}
					return e.split(",")[0]
				}
			},
		}
	}
</script>

<style lang="scss">
	.notice-content {
		display: block;
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #482929;
		letter-spacing: 0;
		line-height: 40rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/*规定最多显示两行*/
	}

	.card-actions {
		display: flex;
		height: 60rpx;
		margin-right: 10rpx;
		justify-content: flex-end;
	}

	.title {
		//设置想要的样式...
		font-size: 28rpx;
		height: 28rpx;
		line-height: 28rpx;
	}

	.selectTab /deep/ .van-tabs--line {
		height: 90rpx;
	}

	.selectTab /deep/ .van-tabs__wrap {
		height: 90rpx;
	}

	.card-actions-item-text {
		font-size: 28rpx;
	}
</style>
